ப்ரீலோட், ப்ரீஃபெட்ச், ப்ரீகனெக்ட் போன்ற வளக்குறிப்புகளைப் பயன்படுத்தி இணையதள ஏற்ற நேரங்களை மேம்படுத்தி, உலகளவில் பயனர் அனுபவத்தை உயர்த்துவது பற்றி அறிக.
வளக்குறிப்புகளுடன் (Resource Hints) இணையதள வேகத்தை அதிகரித்தல்: ப்ரீலோட், ப்ரீஃபெட்ச் மற்றும் ப்ரீகனெக்ட்
இன்றைய வேகமான டிஜிட்டல் உலகில், இணையதள வேகம் மிகவும் முக்கியமானது. பயனர்கள் இணையதளங்கள் விரைவாக ஏற்றப்பட்டு உடனடியாக பதிலளிக்க வேண்டும் என்று எதிர்பார்க்கிறார்கள். மெதுவான ஏற்ற நேரங்கள் மோசமான பயனர் அனுபவம், அதிக பவுன்ஸ் விகிதங்கள் மற்றும் இறுதியில், வணிக இழப்புக்கு வழிவகுக்கும். வளக்குறிப்புகள் என்பது டெவலப்பர்களுக்கு இணையதள ஏற்ற நேரங்களை மேம்படுத்த உதவும் சக்திவாய்ந்த கருவிகளாகும். அவை எந்த வளங்கள் முக்கியமானவை மற்றும் அவற்றுக்கு எப்படி முன்னுரிமை அளிக்க வேண்டும் என்பதை உலாவிக்குத் தெரிவிக்கின்றன. இந்தக்கட்டுரை மூன்று முக்கிய வளக்குறிப்புகளை ஆராய்கிறது: preload, prefetch, மற்றும் preconnect, மற்றும் அவற்றைச் செயல்படுத்துவதற்கான நடைமுறை எடுத்துக்காட்டுகளை வழங்குகிறது.
வளக்குறிப்புகளைப் புரிந்துகொள்ளுதல்
வளக்குறிப்புகள் என்பது ஒரு இணையப் பக்கத்திற்கு எதிர்காலத்தில் தேவைப்படும் வளங்கள் குறித்து உலவிக்கு அறிவுறுத்தும் கட்டளைகள் ஆகும். அவை டெவலப்பர்களை முக்கிய வளங்கள் பற்றி உலாவிக்கு முன்கூட்டியே தெரிவிக்க அனுமதிக்கின்றன, இதனால் உலாவி அவற்றை வழக்கத்தை விட முன்னதாகவே பெற்றுக்கொள்ள அல்லது இணைப்பை ஏற்படுத்த முடிகிறது. இது ஏற்ற நேரங்களைக் கணிசமாகக் குறைத்து, உணரப்பட்ட செயல்திறனை மேம்படுத்தும்.
மூன்று முதன்மை வளக்குறிப்புகள்:
- ப்ரீலோட்: ஆரம்பப் பக்க ஏற்றத்திற்குத் தேவையான முக்கிய வளங்களைப் பெறுகிறது.
- ப்ரீஃபெட்ச்: எதிர்காலப் பயணங்கள் அல்லது ஊடாடல்களுக்குத் தேவைப்படக்கூடிய வளங்களைப் பெறுகிறது.
- ப்ரீகனெக்ட்: முக்கியமான மூன்றாம் தரப்பு சேவையகங்களுடன் ஆரம்பகால இணைப்புகளை ஏற்படுத்துகிறது.
ப்ரீலோட்: முக்கிய வளங்களுக்கு முன்னுரிமை அளித்தல்
ப்ரீலோட் என்றால் என்ன?
Preload என்பது ஒரு அறிவிப்புப் பெறுதல் ஆகும். இது தற்போதைய வழிசெலுத்தலுக்குத் தேவையான ஒரு வளத்தை முடிந்தவரை விரைவாகப் பெறுமாறு உலாவிக்குக் கூற உங்களை அனுமதிக்கிறது. இது CSS அல்லது ஜாவாஸ்கிரிப்ட் மூலம் ஏற்றப்படும் படங்கள், எழுத்துருக்கள், ஸ்கிரிப்டுகள் அல்லது ஸ்டைல்ஷீட்கள் போன்ற, உலாவியால் தாமதமாகக் கண்டறியப்படும் வளங்களுக்கு குறிப்பாகப் பயன்படும். இந்த வளங்களை முன்கூட்டியே ஏற்றுவதன் மூலம், அவை ரெண்டரிங்கைத் தடுப்பதைத் தடுத்து, உங்கள் இணையதளத்தின் உணரப்பட்ட ஏற்ற வேகத்தை மேம்படுத்தலாம்.
ப்ரீலோடை எப்போது பயன்படுத்த வேண்டும்
preload ஐ இதற்காகப் பயன்படுத்தவும்:
- எழுத்துருக்கள்: தனிப்பயன் எழுத்துருக்களை முன்கூட்டியே ஏற்றுவது, ஸ்டைல் செய்யப்படாத உரையின் ஃபிளாஷ் (FOUT) அல்லது கண்ணுக்குத் தெரியாத உரையின் ஃபிளாஷ் (FOIT) ஆகியவற்றைத் தடுக்கலாம்.
- படங்கள்: மடிப்புக்கு மேலே உள்ள படங்களுக்கு முன்னுரிமை அளிப்பது, அவை விரைவாக ஏற்றப்படுவதை உறுதிசெய்கிறது, ஆரம்ப பயனர் அனுபவத்தை மேம்படுத்துகிறது.
- ஸ்கிரிப்டுகள் மற்றும் ஸ்டைல்ஷீட்கள்: முக்கியமான CSS அல்லது ஜாவாஸ்கிரிப்ட் கோப்புகளை முன்கூட்டியே ஏற்றுவது ரெண்டரிங்கைத் தடுப்பதைத் தவிர்க்கிறது.
- தொகுதிகள் மற்றும் வெப் வொர்க்கர்கள்: தொகுதிகள் அல்லது வெப் வொர்க்கர்களை முன்கூட்டியே ஏற்றுவது உங்கள் பயன்பாட்டின் பதிலளிப்புத் திறனை மேம்படுத்தும்.
ப்ரீலோடை செயல்படுத்துவது எப்படி
உங்கள் HTML ஆவணத்தின் <head> பகுதியில் <link> டேக்கைப் பயன்படுத்தி preload ஐ செயல்படுத்தலாம்:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
விளக்கம்:
rel="preload": உலாவி வளத்தை முன்கூட்டியே ஏற்ற வேண்டும் என்பதைக் குறிப்பிடுகிறது.href="/path/to/resource": முன்கூட்டியே ஏற்றப்பட வேண்டிய வளத்தின் URL.as="type": முன்கூட்டியே ஏற்றப்படும் வளத்தின் வகையைக் குறிப்பிடுகிறது (எ.கா., font, style, script, image). `as` பண்புக்கூறு கட்டாயமானது மற்றும் உலாவி வளத்தை சரியாக முன்னுரிமைப்படுத்தி கையாளுவதற்கு முக்கியமானது. சரியான `as` மதிப்பைப் பயன்படுத்துவது உலாவி சரியான உள்ளடக்கப் பாதுகாப்பு கொள்கையை (CSP) பயன்படுத்துவதையும் சரியானAcceptதலைப்பை அனுப்புவதையும் உறுதி செய்கிறது.type="mime/type": (விருப்பமானது ஆனால் பரிந்துரைக்கப்படுகிறது) வளத்தின் MIME வகையைக் குறிப்பிடுகிறது. இது உலாவி சரியான வள வடிவமைப்பைத் தேர்ந்தெடுக்க உதவுகிறது, குறிப்பாக எழுத்துருக்களுக்கு.crossorigin="anonymous": (வேறு மூலத்திலிருந்து ஏற்றப்படும் எழுத்துருக்களுக்குத் தேவை) கோரிக்கைக்கான CORS பயன்முறையைக் குறிப்பிடுகிறது. நீங்கள் ஒரு CDN இலிருந்து எழுத்துருக்களை ஏற்றுகிறீர்கள் என்றால், உங்களுக்கு இந்த பண்புக்கூறு தேவைப்படும்.
எடுத்துக்காட்டு: ஒரு எழுத்துருவை முன்கூட்டியே ஏற்றுதல்
உங்கள் இணையதளத்தில் 'OpenSans' என்ற தனிப்பயன் எழுத்துரு பயன்படுத்தப்படுகிறது என்று கற்பனை செய்து கொள்ளுங்கள். ப்ரீலோட் இல்லாமல், உலாவி CSS கோப்பை பாகுபடுத்திய பின்னரே இந்த எழுத்துருவைக் கண்டறியும். இது சரியான எழுத்துருவுடன் உரையை ரெண்டரிங் செய்வதில் தாமதத்தை ஏற்படுத்தும். எழுத்துருவை முன்கூட்டியே ஏற்றுவதன் மூலம், இந்த தாமதத்தை நீங்கள் அகற்றலாம்.
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
எடுத்துக்காட்டு: ஒரு முக்கியமான CSS கோப்பை முன்கூட்டியே ஏற்றுதல்
உங்கள் இணையதளத்தில் ஆரம்பக் காட்சியை ரெண்டரிங் செய்வதற்கு அவசியமான ஒரு முக்கியமான CSS கோப்பு இருந்தால், அதை முன்கூட்டியே ஏற்றுவது உணரப்பட்ட செயல்திறனை கணிசமாக மேம்படுத்தும்.
<link rel="preload" href="/styles/critical.css" as="style">
ப்ரீலோடுக்கான சிறந்த நடைமுறைகள்
- முக்கிய வளங்களுக்கு முன்னுரிமை கொடுங்கள்: ஆரம்பப் பக்க ஏற்றத்திற்கு அவசியமான வளங்களை மட்டுமே முன்கூட்டியே ஏற்றவும். ப்ரீலோடை அதிகமாகப் பயன்படுத்துவது செயல்திறனை எதிர்மறையாகப் பாதிக்கலாம்.
- சரியான
asபண்புக்கூற்றைப் பயன்படுத்தவும்: உலாவி வளத்தை சரியாகக் கையாள்வதை உறுதிசெய்ய, எப்போதும் சரியானasபண்புக்கூற்றைக் குறிப்பிடவும். typeபண்புக்கூற்றைச் சேர்க்கவும்: உலாவி சரியான வள வடிவமைப்பைத் தேர்ந்தெடுக்க உதவ,typeபண்புக்கூற்றைச் சேர்க்கவும்.- குறுக்கு-மூல எழுத்துருக்களுக்கு
crossoriginஐப் பயன்படுத்தவும்: வேறு மூலத்திலிருந்து எழுத்துருக்களை ஏற்றும்போது,crossoriginபண்புக்கூற்றைச் சேர்ப்பதை உறுதிசெய்யவும். - செயல்திறனைச் சோதிக்கவும்: ப்ரீலோட் உண்மையில் ஏற்ற நேரங்களை மேம்படுத்துகிறதா என்பதை உறுதிப்படுத்த, அதன் செயல்திறன் தாக்கத்தை எப்போதும் சோதிக்கவும். தாக்கத்தை அளவிட Google PageSpeed Insights அல்லது WebPageTest போன்ற கருவிகளைப் பயன்படுத்தவும்.
ப்ரீஃபெட்ச்: எதிர்காலத் தேவைகளைக் கணித்தல்
ப்ரீஃபெட்ச் என்றால் என்ன?
Prefetch என்பது ஒரு வளக்குறிப்பு ஆகும். இது எதிர்கால வழிசெலுத்தல்கள் அல்லது ஊடாடல்களுக்குத் தேவைப்படக்கூடிய வளங்களைப் பெறுமாறு உலாவிக்குக் கூறுகிறது. தற்போதைய பக்கத்திற்குத் தேவையான வளங்களில் கவனம் செலுத்தும் preload போலல்லாமல், prefetch பயனரின் அடுத்த நகர்வைக் கணிக்கிறது. இது அடுத்தடுத்த பக்கங்கள் அல்லது கூறுகளின் ஏற்ற வேகத்தை மேம்படுத்துவதற்கு குறிப்பாகப் பயன்படும்.
ப்ரீஃபெட்ச்சை எப்போது பயன்படுத்த வேண்டும்
prefetch ஐ இதற்காகப் பயன்படுத்தவும்:
- அடுத்த பக்க வளங்கள்: பயனர் அடுத்து ஒரு குறிப்பிட்ட பக்கத்திற்குச் செல்ல வாய்ப்புள்ளது என்று உங்களுக்குத் தெரிந்தால், அதன் வளங்களை முன்கூட்டியே பெறவும்.
- பயனர் ஊடாடல்களுக்கான வளங்கள்: ஒரு பயனர் ஊடாடல் குறிப்பிட்ட வளங்களை ஏற்றுவதைத் தூண்டினால் (எ.கா., ஒரு மோடல் சாளரம், ஒரு படிவம்), அந்த வளங்களை முன்கூட்டியே பெறவும்.
- மற்ற பக்கங்களில் உள்ள படங்கள் மற்றும் சொத்துக்கள்: பயனர் பார்வையிட வாய்ப்புள்ள மற்ற பக்கங்களில் பயன்படுத்தப்படும் படங்கள் அல்லது சொத்துக்களை முன்கூட்டியே ஏற்றவும்.
ப்ரீஃபெட்ச்சை செயல்படுத்துவது எப்படி
உங்கள் HTML ஆவணத்தின் <head> பகுதியில் <link> டேக்கைப் பயன்படுத்தி prefetch ஐ செயல்படுத்தலாம்:
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">
விளக்கம்:
rel="prefetch": உலாவி வளத்தை முன்கூட்டியே பெற வேண்டும் என்பதைக் குறிப்பிடுகிறது.href="/path/to/resource": முன்கூட்டியே பெறப்பட வேண்டிய வளத்தின் URL.
எடுத்துக்காட்டு: அடுத்த பக்கத்தின் வளங்களை முன்கூட்டியே பெறுதல்
உங்கள் இணையதளத்தில் பல-படி படிவம் போன்ற தெளிவான பயனர் ஓட்டம் இருந்தால், பயனர் தற்போதைய படியில் இருக்கும்போது அடுத்த படியின் வளங்களை முன்கூட்டியே பெறலாம்.
<link rel="prefetch" href="/form/step2.html">
எடுத்துக்காட்டு: ஒரு மோடல் சாளரத்திற்கான வளங்களை முன்கூட்டியே பெறுதல்
உங்கள் இணையதளம் திறக்கப்படும்போது கூடுதல் வளங்களை ஏற்றும் ஒரு மோடல் சாளரத்தைப் பயன்படுத்தினால், மென்மையான பயனர் அனுபவத்தை உறுதிப்படுத்த அந்த வளங்களை முன்கூட்டியே பெறலாம்.
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">
ப்ரீஃபெட்ச்சுக்கான சிறந்த நடைமுறைகள்
- அளவோடு பயன்படுத்தவும்: ப்ரீஃபெட்ச்சை குறைவாகப் பயன்படுத்த வேண்டும், ஏனெனில் பயனர் முன்கூட்டியே பெறப்பட்ட வளங்கள் தேவைப்படாவிட்டாலும் அது அலைவரிசை மற்றும் வளங்களை நுகரக்கூடும்.
- சாத்தியமான வழிசெலுத்தல்களுக்கு முன்னுரிமை கொடுங்கள்: ஏற்பட அதிக வாய்ப்புள்ள பக்கங்கள் அல்லது ஊடாடல்களுக்கான வளங்களை முன்கூட்டியே பெறவும்.
- நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுங்கள்: நிலையான மற்றும் வேகமான இணைய இணைப்புகளைக் கொண்ட பயனர்களுக்கு ப்ரீஃபெட்ச் மிகவும் பொருத்தமானது. மெதுவான அல்லது மீட்டர் செய்யப்பட்ட இணைப்புகளில் உள்ள பயனர்களுக்கு பெரிய வளங்களை முன்கூட்டியே பெறுவதைத் தவிர்க்கவும். பயனரின் இணைப்பு வகையைக் கண்டறிந்து அதற்கேற்ப ப்ரீஃபெட்ச்சை சரிசெய்ய நெட்வொர்க் தகவல் API ஐப் பயன்படுத்தலாம்.
- செயல்திறனைக் கண்காணிக்கவும்: ப்ரீஃபெட்ச் ஒரு நிகர நன்மையை வழங்குகிறதா என்பதை உறுதிப்படுத்த, உங்கள் இணையதளத்தின் செயல்திறனில் அதன் தாக்கத்தைக் கண்காணிக்கவும்.
- டைனமிக் ப்ரீஃபெட்ச்சிங்கைப் பயன்படுத்தவும்: பயனர் நடத்தை மற்றும் பகுப்பாய்வுத் தரவுகளின் அடிப்படையில் ப்ரீஃபெட்ச்சை மாறும் வகையில் செயல்படுத்தவும். எடுத்துக்காட்டாக, தற்போது தற்போதைய பக்கத்தில் இருக்கும் பயனர்களால் அடிக்கடி பார்வையிடப்படும் பக்கங்களுக்கான வளங்களை முன்கூட்டியே பெறவும்.
ப்ரீகனெக்ட்: ஆரம்பகால இணைப்புகளை ஏற்படுத்துதல்
ப்ரீகனெக்ட் என்றால் என்ன?
Preconnect என்பது ஒரு வளக்குறிப்பு ஆகும், இது முக்கியமான மூன்றாம் தரப்பு சேவையகங்களுடன் ஆரம்பகால இணைப்புகளை ஏற்படுத்த உங்களை அனுமதிக்கிறது. ஒரு இணைப்பை ஏற்படுத்துவது DNS தேடல், TCP கைகுலுக்கல் மற்றும் TLS பேச்சுவார்த்தை உள்ளிட்ட பல படிகளை உள்ளடக்கியது. இந்தப் படிகள் அந்த சேவையகங்களிலிருந்து வளங்களை ஏற்றுவதில் குறிப்பிடத்தக்க தாமதத்தைச் சேர்க்கலாம். Preconnect இந்தப் படிகளை பின்னணியில் தொடங்க உங்களை அனுமதிக்கிறது, இதனால் உலாவி சேவையகத்திலிருந்து ஒரு வளத்தைப் பெற வேண்டியிருக்கும் போது, இணைப்பு ஏற்கனவே நிறுவப்பட்டிருக்கும்.
ப்ரீகனெக்டை எப்போது பயன்படுத்த வேண்டும்
preconnect ஐ இதற்காகப் பயன்படுத்தவும்:
- மூன்றாம் தரப்பு சேவையகங்கள்: எழுத்துருக்கள், CDNகள், APIகள் அல்லது உங்கள் இணையதளம் சார்ந்திருக்கும் வேறு எந்த வளங்களையும் வழங்கும் சேவையகங்கள்.
- அடிக்கடி பயன்படுத்தப்படும் சேவையகங்கள்: உங்கள் இணையதளத்தால் அடிக்கடி அணுகப்படும் சேவையகங்கள்.
ப்ரீகனெக்டை செயல்படுத்துவது எப்படி
உங்கள் HTML ஆவணத்தின் <head> பகுதியில் <link> டேக்கைப் பயன்படுத்தி preconnect ஐ செயல்படுத்தலாம்:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
விளக்கம்:
rel="preconnect": உலாவி சேவையகத்துடன் முன்கூட்டியே இணைக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது.href="https://example.com": முன்கூட்டியே இணைக்கப்பட வேண்டிய சேவையகத்தின் URL.crossorigin: (விருப்பமானது, ஆனால் CORS உடன் ஏற்றப்படும் வளங்களுக்குத் தேவை) இணைப்புக்கு CORS தேவை என்பதைக் குறிப்பிடுகிறது.
எடுத்துக்காட்டு: Google Fonts உடன் முன்கூட்டியே இணைத்தல்
உங்கள் இணையதளம் Google Fonts ஐப் பயன்படுத்தினால், https://fonts.gstatic.com உடன் முன்கூட்டியே இணைப்பது எழுத்துரு ஏற்றத்தின் தாமதத்தை கணிசமாகக் குறைக்கும்.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Google Fonts எழுத்துருக்களை வழங்க CORS ஐப் பயன்படுத்துவதால் `crossorigin` பண்புக்கூறு இங்கு முக்கியமானது.
எடுத்துக்காட்டு: ஒரு CDN உடன் முன்கூட்டியே இணைத்தல்
உங்கள் இணையதளம் நிலையான சொத்துக்களை வழங்க ஒரு CDN ஐப் பயன்படுத்தினால், CDN இன் ஹோஸ்ட்பெயருடன் முன்கூட்டியே இணைப்பது அந்த சொத்துக்களை ஏற்றுவதற்கான தாமதத்தைக் குறைக்கும்.
<link rel="preconnect" href="https://cdn.example.com">
ப்ரீகனெக்டிற்கான சிறந்த நடைமுறைகள்
- நியாயமாகப் பயன்படுத்தவும்: பல சேவையகங்களுடன் முன்கூட்டியே இணைப்பது உண்மையில் செயல்திறனைக் குறைக்கலாம், ஏனெனில் உலாவிக்கு இணைப்புகளை ஏற்படுத்துவதற்கு வரையறுக்கப்பட்ட வளங்களே உள்ளன.
- முக்கியமான சேவையகங்களுக்கு முன்னுரிமை கொடுங்கள்: உங்கள் இணையதளத்தின் செயல்திறனுக்கு மிகவும் முக்கியமான சேவையகங்களுடன் முன்கூட்டியே இணைக்கவும்.
- DNS-ப்ரீஃபெட்சைக் கருத்தில் கொள்ளுங்கள்: நீங்கள் முழுமையாக முன்கூட்டியே இணைக்கத் தேவையில்லாத, ஆனால் DNS ஐ முன்கூட்டியே தீர்க்க விரும்பும் சேவையகங்களுக்கு,
<link rel="dns-prefetch" href="https://example.com">ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். DNS-ப்ரீஃபெட்ச் DNS தேடலை மட்டுமே செய்கிறது, இது ஒரு முழுமையான ப்ரீகனெக்டை விட குறைவான வளம் தேவைப்படும். - செயல்திறனைச் சோதிக்கவும்: ப்ரீகனெக்ட் ஒரு நிகர நன்மையை வழங்குகிறதா என்பதை உறுதிப்படுத்த, அதன் செயல்திறன் தாக்கத்தை எப்போதும் சோதிக்கவும்.
- பிற வளக்குறிப்புகளுடன் இணைக்கவும்: உகந்த செயல்திறனை அடைய ப்ரீகனெக்டை ப்ரீலோட் மற்றும் ப்ரீஃபெட்ச் உடன் இணைந்து பயன்படுத்தவும். எடுத்துக்காட்டாக, உங்கள் எழுத்துருக்களை வழங்கும் சேவையகத்துடன் முன்கூட்டியே இணைத்து, பின்னர் எழுத்துரு கோப்புகளை முன்கூட்டியே ஏற்றவும்.
உகந்த செயல்திறனுக்காக வளக்குறிப்புகளை இணைத்தல்
வளக்குறிப்புகளின் உண்மையான சக்தி அவற்றை மூலோபாய ரீதியாக இணைப்பதில் உள்ளது. இதோ ஒரு நடைமுறை உதாரணம்:
ஒரு CDN இல் ஹோஸ்ட் செய்யப்பட்ட தனிப்பயன் எழுத்துருவைப் பயன்படுத்தும் மற்றும் ஒரு முக்கியமான ஜாவாஸ்கிரிப்ட் கோப்பை ஏற்றும் ஒரு இணையதளத்தை கற்பனை செய்து பாருங்கள்.
- CDN உடன் முன்கூட்டியே இணைக்கவும்: எழுத்துரு மற்றும் ஜாவாஸ்கிரிப்ட் கோப்பை வழங்கும் CDN உடன் ஒரு ஆரம்ப இணைப்பை ஏற்படுத்தவும்.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - எழுத்துருவை முன்கூட்டியே ஏற்றவும்: FOUT ஐத் தடுக்க எழுத்துருவை ஏற்றுவதற்கு முன்னுரிமை கொடுங்கள்.
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - ஜாவாஸ்கிரிப்ட் கோப்பை முன்கூட்டியே ஏற்றவும்: ஜாவாஸ்கிரிப்ட் கோப்பு தேவைப்படும்போது கிடைப்பதை உறுதிசெய்ய அதை ஏற்றுவதற்கு முன்னுரிமை கொடுங்கள்.
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
வளக்குறிப்புகளை பகுப்பாய்வு செய்வதற்கான கருவிகள்
பல கருவிகள் உங்கள் வளக்குறிப்புகளின் செயல்திறனைப் பகுப்பாய்வு செய்ய உதவும்:
- Google PageSpeed Insights: வளக்குறிப்புகளின் பயன்பாடு உட்பட, உங்கள் இணையதளத்தின் செயல்திறனை மேம்படுத்துவதற்கான பரிந்துரைகளை வழங்குகிறது.
- WebPageTest: உங்கள் இணையதளத்தின் செயல்திறனை வெவ்வேறு இடங்கள் மற்றும் நெட்வொர்க் நிலைமைகளிலிருந்து சோதிக்க உங்களை அனுமதிக்கிறது.
- Chrome DevTools: Chrome DevTools இல் உள்ள நெட்வொர்க் பேனல் வள ஏற்றத்தின் நேரத்தைக் காட்டுகிறது மற்றும் மேம்படுத்தலுக்கான வாய்ப்புகளை அடையாளம் காண உதவும்.
- Lighthouse: இணையப் பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு தானியங்கு கருவி. இது செயல்திறன், அணுகல்தன்மை, முற்போக்கான வலைப் பயன்பாடுகள், SEO மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது.
பொதுவான ஆபத்துகள் மற்றும் அவற்றை தவிர்ப்பது எப்படி
- வளக்குறிப்புகளை அதிகமாகப் பயன்படுத்துதல்: பல வளக்குறிப்புகளைப் பயன்படுத்துவது செயல்திறனை எதிர்மறையாக பாதிக்கும். மிக முக்கியமான வளங்களில் கவனம் செலுத்துங்கள்.
- தவறான
asபண்புக்கூறு: ப்ரீலோடுக்கு தவறானasபண்புக்கூற்றைப் பயன்படுத்துவது வளம் சரியாக ஏற்றப்படுவதைத் தடுக்கலாம். - CORS ஐ புறக்கணித்தல்: வேறு மூலத்திலிருந்து வளங்களை ஏற்றும்போது
crossoriginபண்புக்கூற்றைச் சேர்க்கத் தவறினால் ஏற்றுதல் பிழைகளை ஏற்படுத்தக்கூடும். - செயல்திறனைச் சோதிக்காமல் இருப்பது: வளக்குறிப்புகள் ஒரு நிகர நன்மையை வழங்குகின்றனவா என்பதை உறுதிப்படுத்த, அவற்றின் செயல்திறன் தாக்கத்தை எப்போதும் சோதிக்கவும்.
- தவறான பாதைகள்: வளக்குறிப்புகளுக்காகக் குறிப்பிடப்பட்ட அனைத்து கோப்புப் பாதைகளும் URLகளும் சரியானவை என்பதை இருமுறை சரிபார்த்து உறுதிப்படுத்தவும், இல்லையெனில், அது பிழையில் முடியும்.
வளக்குறிப்புகளின் எதிர்காலம்
வளக்குறிப்புகள் தொடர்ந்து உருவாகி வருகின்றன, புதிய அம்சங்கள் மற்றும் மேம்பாடுகள் உலாவி விவரக்குறிப்புகளில் சேர்க்கப்படுகின்றன. வளக்குறிப்புகளில் சமீபத்திய முன்னேற்றங்களுடன் புதுப்பித்த நிலையில் இருப்பது உங்கள் இணையதளத்தின் செயல்திறனை மேலும் மேம்படுத்த உதவும். எடுத்துக்காட்டாக, modulepreload என்பது ஜாவாஸ்கிரிப்ட் தொகுதிகளை முன்கூட்டியே ஏற்றுவதற்காக பிரத்யேகமாக வடிவமைக்கப்பட்ட ஒரு புதிய வளக்குறிப்பாகும். மேலும், வளக்குறிப்புகளுக்கான `priority` பண்புக்கூறு, ஒரு வளத்தின் முன்னுரிமையை மற்ற வளங்களுடன் ஒப்பிட்டு குறிப்பிட உங்களை அனுமதிக்கிறது. இந்த அம்சங்களுக்கான உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது, எனவே அவற்றைச் செயல்படுத்துவதற்கு முன்பு இணக்கத்தன்மையைச் சரிபார்க்கவும்.
முடிவுரை
வளக்குறிப்புகள் இணையதள ஏற்ற நேரங்களை மேம்படுத்துவதற்கும் பயனர் அனுபவத்தை மேம்படுத்துவதற்கும் சக்திவாய்ந்த கருவிகளாகும். preload, prefetch, மற்றும் preconnect ஆகியவற்றை மூலோபாய ரீதியாகப் பயன்படுத்துவதன் மூலம், முக்கிய வளங்கள் பற்றி உலாவிக்கு முன்கூட்டியே தெரிவிக்கலாம், தாமதத்தைக் குறைக்கலாம் மற்றும் உங்கள் இணையதளத்தின் உணரப்பட்ட செயல்திறனை மேம்படுத்தலாம். முக்கிய வளங்களுக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள், வளக்குறிப்புகளை நியாயமாகப் பயன்படுத்துங்கள், மேலும் உங்கள் மாற்றங்களின் செயல்திறன் தாக்கத்தை எப்போதும் சோதிக்கவும். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் இணையதளத்தின் செயல்திறனை கணிசமாக மேம்படுத்தலாம் மற்றும் உலகெங்கிலும் உள்ள உங்கள் பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்கலாம்.